<!DOCTYPE html>
<html>
<head>
    <title>管理员列表</title>
    <%
    include("/include/header.html"){}
    %>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <Row :gutter="16">
            <div class="search-group">
                <i-col span="4">
                    <i-input v-model="q.name" @on-enter="query" placeholder="用户名"/>
                </i-col>
                <i-button @click="query">查询</i-button>
            </div>
            <div class="buttons-group">
                <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
                <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
            </div>
        </Row>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <Card v-show="!showList">
        <p slot="title">{{title}}</p>
        <i-form  ref="formValidate" :model="user" :rules="ruleValidate" :label-width="80" inline>
            <Form-item label="用户名" prop="username" >
                <i-input v-model="user.username" placeholder="登录账号"/>
            </Form-item>
            <Form-item label="姓名" prop="name" >
                <i-input v-model="user.name" placeholder="姓名"/>
            </Form-item>
            <br/>
            <Form-item label="年龄" >
                <i-input v-model="user.age" placeholder="年龄"/>
            </Form-item>
            <Form-item label="所属部门" prop="officeName">
                <i-input type="text" v-model="user.officeName" icon="eye" @on-click="officeTree" readonly="readonly" placeholder="所属部门"/>
            </Form-item>
            <br/>
            <Form-item label="邮箱" prop="email">
                <i-input  v-model="user.email" placeholder="邮箱"/>
            </Form-item>
            <Form-item label="手机号" prop="mobile">
                <i-input  v-model="user.mobile" placeholder="手机号"/>
            </Form-item>
            <br/>
            <Form-item label="角色" prop="roleIdList">
                <Checkbox-group v-model="user.roleIdList">
                    <Checkbox :label="role.id" v-for="role in roleList">{{role.name}}</Checkbox>
                </Checkbox-group>
            </Form-item>
            <br/>
            <Form-item label="状态" prop="status">
                <Radio-group v-model="user.status">
                    <Radio label="0">
                        <span>禁用</span>
                    </Radio>
                    <Radio label="1">
                        <span>正常</span>
                    </Radio>
                </Radio-group>
            </Form-item>
            <br/>
            <Form-item>
                <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                <i-button type="warning" @click="reload" style="margin-left: 8px">返回</i-button>
                <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
            </Form-item>
        </i-form>
    </Card>
</div>

<!-- 选择部门 -->
<div id="officeLayer" style="display: none;padding:10px;">
    <ul id="officeTree" class="ztree"></ul>
</div>
<!-- 加载DATAgIRF -->
<script>
    $(function () {
        $("#jqGrid").Grid({
            url: '${ctxPath}/sys/user/list',
            colModel: [
                {label: '编码', name: 'id', index: "id", key: true,width: 75},
                {label: '姓名', name: 'name', width: 75},
                {label: '手机', name: 'mobile', width: 75},
                {label: '邮箱', name: 'email', width: 90},
                {label: '年龄', name: 'age', width: 100},
                {label: '部门', name: 'officeId', width: 100},
                {
                    label: '状态', name: 'status', width: 80, formatter: function (value) {
                        return value === 0 ?
                            '<span class="label label-danger">禁用</span>' :
                            '<span class="label label-success">正常</span>';
                    }
                },
                { label: '创建时间', name: 'createTime', index: "create_time", width: 80}
                ]
        });
    });

    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: "0"
            },
            key: {
                url: "nourl"
            }
        }
    };
    var ztree;

    var vm = new Vue({
        el: '#rrapp',
        data: {
            q: {
                name: null
            },
            showList: true,
            title: null,
            roleList: {},
            user: {
                status: 1,
                officeName: '',
                officeId: '',
                roleIdList: []
            },
            ruleValidate: {
                name: [
                    {required: true, message: '姓名不能为空', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '邮箱不能为空', trigger: 'blur'},
                    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                ],
                mobile: [
                    {required: true, message: '手机号不能为空', trigger: 'blur'}
                ]
            }
        },
        methods: {
            query: function () {
                vm.reload();
            },
            add: function () {
                vm.showList = false;
                vm.title = "新增(默认密码：888888)";
                vm.roleList = {};
                vm.user = {status: 1, roleIdList: [], officeId: '', officeName: ''};

                //获取角色信息
                this.getRoleList();
                vm.getDept();
            },
            getDept: function () {
                //加载部门树
                Ajax.request({
                    url: '${ctxPath}/sys/office/officeTree',
                    async: true,
                    successCallback: function (r) {
                        ztree = $.fn.zTree.init($("#officeTree"), setting, r.obj);
                        var node = ztree.getNodeByParam("id", vm.user.officeId);
                        if (node != null) {
                            ztree.selectNode(node);
                            vm.user.officeId = node.id;
                            vm.user.officeName = node.name;
                        }
                    }
                });
            },
            update: function () {
                var userId = getSelectedRow("#jqGrid");
                if (userId == null) {
                    return;
                }

                vm.showList = false;
                vm.title = "修改";

                Ajax.request({
                    url: "${ctxPath}/sys/user/info/" + userId,
                    async: true,
                    successCallback: function (r) {
                        vm.user = r.obj;
                        //获取角色信息
                        vm.getRoleList();
                        vm.getDept();
                        console.log(vm.user);
                    }
                });

            },
            del: function () {
                var userIds = getSelectedRows("#jqGrid");
                if (userIds == null) {
                    return;
                }

                confirm('确定要删除选中的记录？', function () {
                    Ajax.request({
                        url: "../sys/user/delete",
                        params: JSON.stringify(userIds),
                        contentType: "application/json",
                        type: 'POST',
                        successCallback: function () {
                            alert('操作成功', function (index) {
                                vm.reload();
                            });
                        }
                    });
                });
            },
            saveOrUpdate: function (event) {
                Ajax.request({
                    url: "${ctxPath}/sys/user/save",
                    params: JSON.stringify(vm.user),
                    contentType: "application/json",
                    successCallback: function (r) {
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    }
                });
            },
            getRoleList: function () {
                Ajax.request({
                    url: '${ctxPath}/sys/role/roleList',
                    async: true,
                    successCallback: function (r) {
                        vm.roleList = r.obj;
                    }
                });
            },
            reload: function (event) {
                vm.showList = true;
                var page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    postData: {'name': vm.q.name},
                    page: page
                }).trigger("reloadGrid");
                vm.handleReset('formValidate');
            },
            officeTree: function () {
                openWindow({
                    title: "选择部门",
                    area: ['300px', '450px'],
                    content: jQuery("#officeLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = ztree.getSelectedNodes();
                        //选择上级部门
                        vm.user.officeId = node[0].id;
                        vm.user.officeName = node[0].name;
                        layer.close(index);
                    }
                });
            },
            handleSubmit: function (name) {
                handleSubmitValidate(this, name, function () {
                    vm.saveOrUpdate()
                });
            },
            handleReset: function (name) {
                handleResetForm(this, name);
            }
        }
    });
</script>
</body>
</html>